<!DOCTYPE html>
<html lang="en">
<head>
    {{include file="lib/page_head" /}}

    <style>
        table th{word-wrap:break-word;word-break:break-all;font-size:12px!important;}
        table td{word-wrap:break-word;word-break:break-all;font-size:12px!important;}
        .from_table .td_l,.from_table .td_r{font-size:14px!important;line-height: 25px;word-wrap:break-word;word-break:break-all}
        /*#search_form .form-control,#search_form .select5{width:100px;height:28px;padding:5px;}*/
        /*#search_form .layui-input-inline{width:auto;margin: 0;}*/
        #search_form .form-group{margin-right:0;margin-bottom: 5px;}
        #search_form .btn{height:30px;line-height:30px;padding:0 10px;}
    </style>
    <link href="../css/highcharts.css" rel="stylesheet">
</head>

<body>



<!-- Preloader -->
<div id="preloader">
    <div id="status"><i class="fa fa-spinner fa-spin"></i></div>
</div>

<section>
    {{include file="lib/page_left" /}}
    <div class="mainpanel">

        {{include file="lib/page_header" /}}

        <div class="contentpanel" >
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-btns">
                        <a href="" class="panel-close">×</a>
                        <a href="" class="minimize">−</a>
                    </div>
                    <h4 class="panel-title">数据分析</h4>
                </div>
                <div class="panel-body ">
                    <div id="info_list" class="form-inline">
                        <div class="layui-form-item search_tools" style="margin-top:10px;" >
                            <form class="layui-form" id="search_form" action="" onsubmit="return false;">

                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" id="search_date" placeholder="请选择日期范围" data-startDate="" data-endDate="" style="width:210px;">
                                    </div>
                                </div>
                                <div style="display: inline-block;clear: both;">
                                    <button class="btn btn-primary" onclick="search()">查询</button>
                                    <button class="btn btn-default" onclick="search_reset()">取消</button>
                                </div>
                            </form>
                            <div class="well well-sm search_toogle"><span class="glyphicon glyphicon-chevron-down"></span></div>
                        </div>
                    </div>

                </div>

            </div>
            <div class="">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div id="container">

                        </div>
                    </div>
                </div>
            </div>

        </div><!-- contentpanel -->

    </div><!-- mainpanel -->
    {{include file="lib/page_right" /}}
</section>

<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/jquery-migrate-1.2.1.min.js"></script>
<script src="../js/jquery-ui-1.10.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery.sparkline.min.js"></script>
<script src="../js/toggles.min.js"></script>
<script src="../js/jquery.cookies.js"></script>
<script src="../js/jquery.tmpl.js"></script>
<script src="../js/custom.js"></script>
<script src="../layui/layui.js"></script>
<script src="../js/jquery.gritter.min.js"></script>
<script src="../js/form.beautify.js?t={{$version}}"></script>
<script src="../js/commen.js?t={{$version}}"></script>
<script src="../js/datatables.js?t={{$version}}"></script>
<link href="../css/ley.dialog.css" rel="stylesheet">
<script src="../js/ley.dialog.js?t={{$version}}"></script>
<script src="../js/highcharts.js"></script>

<script>
    layui.use(['laydate','laypage',"element"], function(){
        var laydate = layui.laydate;

        laydate.render({
            elem: '#search_date'
            ,range: "~"
            ,done: function(value, date, date1){
                var startDate = (new Date(date.year+"-"+date.month+"-"+date.date)).Format("yyyy-MM-dd");
                var endDate = (new Date(date1.year+"-"+date1.month+"-"+date1.date)).Format("yyyy-MM-dd");
                $("#search_date").attr({"data-startDate":startDate,"data-endDate":endDate});
            }
        });
        search_reset();

    });
    var admin_id = "{{$ADMIN_ID}}";

    $(function () {


    });
    function search_reset() {
        $("#search_form")[0].reset();
        var nowDate = new Date();
        var endDate = nowDate.Format("yyyy-MM-dd");
        nowDate.setTime(nowDate.getTime()-7*86400*1000);
        var startDate =nowDate.Format("yyyy-MM-dd");
        $("#search_date").attr({"data-startDate":startDate,"data-endDate":endDate});
        $("#search_date").val(startDate+" ~ "+endDate);
        search();
    }
    function search()
    {
        var startDate = $("#search_date").attr("data-startDate");
        var endDate = $("#search_date").attr("data-endDate");
        AjaxCommen("GET","/orders/ajax_appdatacount",{startDate:startDate,endDate:endDate},function (msg) {
            if(msg.error === 0)
            {

                var chart = Highcharts.chart('container', {
                    title: {
                        text: '订单数量分析'
                    },
                    yAxis: {
                        title: {
                            text: '数量'
                        }
                    },
                    xAxis: {
                        categories: msg.data.date_list
                    },
                    series: [
                        {
                            name: '总订单数',
                            data: msg.data.value_list.count_num
                        },
                        {
                            name: '总付款数',
                            data: msg.data.value_list.pay_num
                        },
                        {
                            name: '充值数',
                            data: msg.data.value_list.mode_num_0
                        }, {
                            name: '开卡数',
                            data: msg.data.value_list.mode_num_1
                        }, {
                            name: '微信付款数',
                            data: msg.data.value_list.weixin_num
                        }
                    ]

                });
            }
        });


    }

</script>

</body>
</html>
